<template>
  <div class="buttons">
     <el-button type="success" class="button">
			 <svg class="icon" aria-hidden="true">
				 <use xlink:href="#icon-bofangliang"></use>
			 </svg>
			 <span class="name">播放全部</span>
     </el-button>
     <el-button plain class="button">
			 <svg class="icon2" aria-hidden="true">
     		 <use xlink:href="#icon-tianjia"></use>
			 </svg>
			 <span class="name">添加到</span>
     </el-button>
     <el-button plain class="button">
			 <svg class="icon2 middle" aria-hidden="true">
     		 <use xlink:href="#icon-xiazai"></use>
			 </svg>
			 <span class="name">下载</span>
     </el-button>
     <el-button plain class="button">
			 <svg class="icon2 big piIcon" aria-hidden="true">
     		 <use xlink:href="#icon-piliangcaozuo"></use>
			 </svg>
			 <span class="name pi">批量操作</span>
     </el-button>
     <el-button plain class="button">
			 <svg class="icon2 middle" aria-hidden="true">
     		 <use xlink:href="#icon-pinglun"></use>
			 </svg>
			 <span class="name">评论</span>
     </el-button>
  </div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {
        
      }
    },
    computed:{
      showGoods(){
        return 0
      }
    },
    props:{
      imgLink:{
        type:String,
        default(){
          return ""
        }
      }
    },
    methods:{
      test(){
        
      }
    },
    components:{
       
    },
    created(){
      
    },
    activated(){
    
    },
    mounted(){
    
    },
    updated(){
      
    },
    deactivated(){
    
    },
    destroyed(){
    
    },
  }
</script>

<style scoped>
	.buttons{
		display: flex;
		align-items: center;
	}
	.button{
		flex: 1;
		width: 150px;
		height: 45px;
		margin: 10px;
	}
	.button:nth-last-of-type(1){
		margin-right: 0px;
	}
	.name{
		font-size: var(--font-middle-size);
	}
  .icon{
		width: 22px;
		height: 22px;
		margin-right: 5px;
		vertical-align: sub;
	}
	.icon:last-of-type {     
	  fill: #fff; 
	}
	.icon2{
		width: 20px;
		height: 20px;
		margin-right: 5px;
		vertical-align: sub;
	}
	.icon2:last-of-type {
	  fill: var(--icon-grey); 
	}
	.middle{
		width: 22px;
		height: 22px;
	}
	.big{
		width: 30px;
		height: 30px;
	}
	.pi,.piIcon{
		position: relative;
		top: -5px;
	}
	.pi{
		top: -9px;
	}
</style>
